<template>
    <div>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>出入库管理</el-breadcrumb-item>
            <el-breadcrumb-item>出入库记录管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div style="border: 2px, lightskyblue, solid; margin-top: 50px; padding: 30px">
        <el-form :inline="true" :model="page" class="demo-form-inline">
            <el-form-item label="记录类型：">
                <el-select v-model="page.Recordtype" placeholder="请选择记录类型" style="width: 240px">
                    <el-option label="请选择记录类型" :value="0" />
                    <el-option label="入库" :value="1" />
                    <el-option label="出库" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="page.Status" placeholder="请选择状态" style="width: 240px">
                    <el-option label="请选择状态" :value="0" />
                    <el-option label="待入库  " :value="1" />
                    <el-option label="已入库  " :value="2" />
                    <el-option label="待出库  " :value="3" />
                    <el-option label="已出库  " :value="4" />
                    <el-option label="取消入库" :value="5" />
                    <el-option label="取消出库" :value="6" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属仓库：">
                <el-select v-model="page.WarehouseId" placeholder="请选择所属仓库" style="width: 240px"
                    @change="LianDongSelect(page.WarehouseId)">
                    <el-option v-for="item in wareHouseOptions" :label="item.warename" :value="item.warehouseNo" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属库位：">
                <el-select v-model="page.LocationId" placeholder="请选择所属库位" style="width: 240px">
                    <el-option v-for="item in locationOptions" :label="item.locationName" :value="item.locationNo" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品：">
                <el-select v-model="page.GoodsId" placeholder="请选择商品" style="width: 240px">
                    <el-option v-for="item in goodsOptions" :label="item.goodsName" :value="item.goodscoding" />
                </el-select>
            </el-form-item>
            <el-form-item label="操作日期区间：">
                <el-date-picker v-model="page.OperationdateStart" type="date" placeholder="开始日期" clearable
                    value-format="YYYY-MM-DD" />——
                <el-date-picker v-model="page.OperationdateEnd" type="date" placeholder="结束日期" clearable
                    value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetIOWareHouseList">查询</el-button>
                <el-button type="primary" @click="ReSet">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div style="margin-top: 50px">
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column fixed prop="appid" label="唯一编码" width="180" />
            <el-table-column prop="recordtype" label="记录类型" width="120">
                <template #default="asd">
                    <el-tag v-if="asd.row.recordtype == 1">入库</el-tag>
                    <el-tag v-if="asd.row.recordtype == 2">出库</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
                <template #default="asd">
                    <el-tag v-if="asd.row.status == 1" type="primary">待入库 </el-tag>
                    <el-tag v-if="asd.row.status == 2" type="success">已入库 </el-tag>
                    <el-tag v-if="asd.row.status == 3" type="primary">待出库 </el-tag>
                    <el-tag v-if="asd.row.status == 4" type="success">已出库 </el-tag>
                    <el-tag v-if="asd.row.status == 5" type="danger">取消入库</el-tag>
                    <el-tag v-if="asd.row.status == 6" type="danger">取消出库</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="warehousename" label="仓库名称" width="120" />
            <el-table-column prop="locationname" label="库位名称" width="120" />
            <el-table-column prop="relationordernum" label="关联商品单号" width="180" />
            <el-table-column prop="goodsName" label="商品名称" width="120" />
            <el-table-column prop="operationuser" label="操作人" width="180" />
            <el-table-column prop="operationdate" label="操作日期" width="180">
                <template #default="asd">
                    {{ moment(asd.row.inwarehousedate).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" width="100" />
            <el-table-column prop="util" label="单位" width="180" />
            <el-table-column prop="money" label="金额（元）" width="120" />
            <el-table-column prop="audituser" label="审核人" width="120" />
            <el-table-column prop="auditdate" label="审核时间" width="180">
                <template #default="asd">
                    {{ moment(asd.row.auditdate).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
                <template #default="asd">
                    <el-button disabled link type="primary" size="small">编辑</el-button>
                    <el-button disabled link type="warning" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <table>
            <tr>
                <th>
                    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, sizes" :total="page.totalData">
                        当前第{{ page.pageIndex }}页/共{{ page.totalPage }}页/共{{
                            page.totalData
                        }}条
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, prev, pager, next" :total="page.totalData">
                        <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1"
                            type="primary">首页</el-button>
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot,jumper" :total="page.totalData">
                        <el-button :disabled="page.pageIndex == page.totalPage" @click="page.pageIndex = page.totalPage"
                            type="primary">尾页</el-button>
                    </el-pagination>
                </th>
            </tr>
        </table>
    </div>


</template>

<script setup lang="ts">
import service from "@/utils/request";
import { ArrowRight } from "@element-plus/icons-vue";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";

onMounted(() => {
    GetIOWareHouseList()
    GetSelectWareHouse()
    GetSelectGoods()
})
const tableData = ref([]);
const page = reactive({
    Recordtype: 0,
    WarehouseId: "",
    LocationId: "",
    GoodsId: "",
    OperationdateStart: "",
    OperationdateEnd: "",
    Status: 0,
    totalPage: 0,
    totalData: 0,
    pageIndex: 1,
    pageSize: 10,
});
const GetIOWareHouseList = () => {
    service
        .get("/api/app/ware-house-management/i-oWare-house-record-list", {
            params: {
                Recordtype: page.Recordtype,
                WarehouseId: page.WarehouseId,
                LocationId: page.LocationId,
                GoodsId: page.GoodsId,
                OperationdateStart: page.OperationdateStart,
                OperationdateEnd: page.OperationdateEnd,
                Status: page.Status,
                pageIndex:page.pageIndex,
                pageSize:page.pageSize
            },
        })
        .then((res) => {
            if (res.data.code == 200) {
                tableData.value = res.data.pageDatas;
                page.totalPage = res.data.totalPage;
                page.totalData = res.data.totalData;
            }
        });
};
watch(page, () => {
    GetIOWareHouseList();
});



const wareHouseOptions = ref([
    {
        warename: "",
        warehouseNo: "",
    },
]);
const GetSelectWareHouse = () => {
    service
        .get(
            "/api/app/ware-house-management/select-ware-house"
        )
        .then((res) => {
            if (res.data.code == 200) {
                wareHouseOptions.value = res.data.resultData;
            }
        });
};


const locationOptions = ref([
    {
        locationName: "",
        locationNo: "",
    },
]);
const GetSelectLocation = (WarehouseId: any) => {
    service
        .get(
            "/api/app/ware-house-management/select-location/" +
            WarehouseId
        )
        .then((res) => {
            if (res.data.code == 200) {
                locationOptions.value = res.data.resultData;
            }
        });
};
const goodsOptions = ref([
    {
        goodsName: "",
        goodscoding: "",
    },
]);
const GetSelectGoods = () => {
    service
        .get("/api/app/ware-house-management/select-goods")
        .then((res) => {
            if (res.data.code == 200) {
                goodsOptions.value = res.data.resultData;
            }
        });
};


const LianDongSelect = (id: any) => {
    GetSelectLocation(id);
};

const ReSet = () => {
    (page.WarehouseId = ""),
        (page.LocationId = ""),
        (page.Recordtype = 0),
        (page.GoodsId = ""),
        (page.Status = 0),
        (page.OperationdateStart = ""),
        (page.OperationdateEnd = ""),
        (page.WarehouseId = "");
};


</script>

<style scoped></style>